@import  "../../../styles/common.less";
.goods-detail{
  max-width:900px;
  min-height: 654px;
  margin: 0 auto;
  margin-top: 80px;
  border: 1px solid #eee;
  background: #FFFFFF;
  box-shadow: 0 2px 21px 0 rgba(34,19,103,0.15);
  border-radius: 4px;
  .detail-left{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    min-height: 654px;
    padding:0;
    .goods-item{
      margin-top: 10px;
      clear: both;
      margin-left: 60px;
    }
    .goback{
      margin-left: 60px;
      margin-top: 60px;
      cursor: pointer;
      .back-normal{
        display: inline-block;
      }
      .back-hover{
        display: none;
      }
      .back-active{
        display: none;
      }
      &:hover{
        .back-hover{
          display: inline-block;
        }
        .back-normal{
          display: none;
        }
        .back-active{
          display: none;
        }
      }
    }
    .title-spliter{
      opacity: 0.27;
      background: #B8C8CD;
      height: 1px;
      margin: 28px 60px 0 60px; 
    }
    .title-class{
      font-family: @font-Regular;
      font-size: 18px;
      color: #61787F;
      letter-spacing: 0;
      margin-top: 33px;
      margin-left: 60px;
    }
    .title-times{
      font-family: @font-Regular;
      font-size: 18px;
      color: #61787F;
      letter-spacing: 0;
      line-height: 18px;
      margin-top: 28px;
      margin-left: 60px;
    }
    .changeTime{
      opacity: 0.7;
      font-family: @font-Regular;
      font-size: 20px;
      color: #61787F;
      letter-spacing: 0;
      line-height: 20px;
      text-align: center;
    }
    .classes{
      margin: 0 60px;
      .class-item{
        margin-top: 28px;
        cursor: pointer;
        span{
          min-width: 144px;
          height: 50px;
          text-align: center;
          line-height: 50px;
          font-family: @font-Regular;
          font-size: 16px;
          background: @white;
          border: 1px solid #E7A555;
          border-radius: 4px;
          display: block;
          &:hover{
            background: #FEFAEA;
          }
        }
      }
    }
    .times{
      margin: 0 60px;
      &-item{
        margin-top: 28px;
        cursor: pointer;
        span{
          min-width: 144px;
          height: 50px;
          text-align: center;
          line-height: 50px;
          font-family: @font-Regular;
          font-size: 16px;
          background: @white;
          border: 1px solid #60AAE9;
          border-radius: 4px;
          display: block;
          &:hover{
            background: #ECF6FF;
          }
        }
      }
    }
    .btn-buy{
      margin-top: 78px;
      height: 50px;
      text-align: center;
    }
    .btn-success{
      width: 140px;
      height: 50px;
    }
  }
  .detail-right{
    box-shadow: 0 2px 33px 0 rgba(45,54,115,0.11);
    padding: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    .right-pannel{
      border-top-right-radius: 4px;
      background: #C9D0FF;
      height: 13px;
    }
    .chooseclass{
      margin-top: 55px;
      text-align: center;
      opacity: 0.6;
      font-family: @font-Regular;
      font-size: @vSize;
      color: #7183FD;
      letter-spacing: 0;
    }
    .nowprice{
      margin-top: 30px;
      text-align: center;
      font-family: Helvetica;
      font-size: @bigerleter;
      color: #7183FD;
      letter-spacing: 0.38px;
    }
    .totalclasstime{
      text-align: center;
      font-family: @font-Medium;
      font-size: @uSize;
      color: #A5B9BF;
      letter-spacing: 0.14px;
    }
    .right-spliter{
      opacity: 0.3;
      background: #7E88D0;
      height: 1px;
      margin: 17px 39px 0 31px;
    }
    .class-group{
      width: 100%;
    }
    .describe{
      text-align: center;
      margin-top: 18px;
      font-family: @font-Medium;
      font-size: @uSize;
      color: #A5B9BF;
      letter-spacing: 0.19px;
      line-height: 26px;
    }

  }
}